<template>
  <div class="right-wrapper">
    <div class="content-bag-fff p24">
      <div class="flex-center-between mb24">
        <div class="flex-center">
          <div class="bag-6a66f6-radius-2px" style="width: 4px; height: 16px; margin-right: 12px"></div>

          <span class="font-16px-3c3d43">企业简报</span>
        </div>
        <a-month-picker v-model="briefingMonth" :allow-clear="false" format="YYYY-MM" />
      </div>
      <a-row class="mt12">
        <a-col :span="8">
          <details-top-item :imgUrl="require('@/assets/icons/hr_zhigong.png')" :title="empTitle" :content="empWorkingCount">
            <div slot="content" class="item-wrapper-n">
              <div style="flex: 1"></div>
              <div class="item-wrapper-n-column">
                <span class="content-span-a6a8b4">入职 </span>
                <span class="content-span-a6a8b4 mt16">离职 </span>
              </div>
              <div class="item-wrapper-n-column ml4">
                <span class="content-span-55565d">{{ empCurrentWorkingCount }}</span>
                <span class="content-span-55565d mt16">{{ empCurrentLeavingCount }}</span>
              </div>
              <div class="item-wrapper-n-column ml4">
                <span class="content-span-a6a8b4">较上月</span>
                <span class="content-span-a6a8b4 mt16">较上月</span>
              </div>
              <div class="item-wrapper-n-column ml4">
                <span v-if="empBeforeWorkingCount === 0" class="content-span-a6a8b4"></span>
                <span v-else class="content-span-a6a8b4">
                  <img
                    :src="empBeforeWorkingCount < 0 ? require('@/assets/icons/hr_jianyuan.png') : require('@/assets/icons/hr_zengyuan.png')"
                    alt=""
                    style="width: 10px; height: 10px; margin-top: -2px"
                  />
                </span>

                <span v-if="empBeforeLeavingCount === 0" class="content-span-a6a8b4 mt16"></span>
                <span v-else class="content-span-a6a8b4 mt16">
                  <img
                    :src="empBeforeLeavingCount < 0 ? require('@/assets/icons/hr_jianyuan.png') : require('@/assets/icons/hr_zengyuan.png')"
                    alt=""
                    style="width: 10px; height: 10px; margin-top: -3px"
                  />
                </span>
              </div>
              <div class="item-wrapper-n-column ml4">
                <span
                  :class="
                    empBeforeWorkingCount === 0
                      ? 'content-span-a6a8b4'
                      : empBeforeWorkingCount < 0
                      ? 'content-span-32CCAA'
                      : 'content-span-FF7085'
                  "
                  >{{ empBeforeWorkingCount > 0 ? empBeforeWorkingCount : Math.abs(empBeforeWorkingCount) }}</span
                >
                <span
                  :class="
                    empBeforeLeavingCount === 0
                      ? 'content-span-a6a8b4'
                      : empBeforeLeavingCount < 0
                      ? 'content-span-32CCAA'
                      : 'content-span-FF7085'
                  "
                  class="mt16"
                  >{{ empBeforeLeavingCount > 0 ? empBeforeLeavingCount : Math.abs(empBeforeLeavingCount) }}</span
                >
              </div>
            </div>
          </details-top-item>
        </a-col>
        <a-col :span="8" class="right-lin">
          <details-top-item
            :imgUrl="require('@/assets/icons/hr_canbao.png')"
            :title="socTitle"
            :content="socCount"
            style="margin-left: 24px"
          >
            <div slot="content" class="item-wrapper-n">
              <div style="flex: 1"></div>
              <div class="item-wrapper-n-column ml4">
                <span class="content-span-a6a8b4">增员</span>
                <span class="content-span-a6a8b4 mt16">减员</span>
              </div>
              <div class="item-wrapper-n-column ml4">
                <span class="content-span-55565d">{{ socIncreaseCount }}</span>
                <span class="content-span-55565d mt16">{{ socDecreaseCount }}</span>
              </div>
            </div>
          </details-top-item>
        </a-col>
        <a-col :span="8" class="right-lin">
          <details-top-item
            :imgUrl="require('@/assets/icons/hr_yingyee.png')"
            :title="amountTitle"
            :content="amountTotalRevenueAmount"
            style="margin-left: 24px"
          >
            <a-popover slot="content" placement="bottom">
              <template slot="content">
                <div class="content-span-popover">
                  <div class="popover-div">
                    <div class="popover-top">
                      <span class="popoverContentSpan">未到账金额</span>
                      <span class="popover-contentSpan ml4">{{ amountUnpaidAmountCount }}</span>
                      <span class="popoverContentSpan">笔</span>
                    </div>
                    <span class="content_span">¥ {{ amountUnpaidAmount }}</span>
                  </div>
                  <a-divider type="vertical" style="height: 30px; margin-left: 10px; margin-right: 10px" />
                  <div class="popover-div">
                    <div class="popover-top">
                      <span class="popoverContentSpan">已结算金额</span>
                      <span class="popover-contentSpan ml4">{{ amountPaidAmountCount }}</span>
                      <span class="popoverContentSpan">笔</span>
                    </div>
                    <span class="content_span">¥ {{ amountPaidAmount }}</span>
                  </div>
                </div>
              </template>
              <div class="item-wrapper-n" style="min-width: 100px; margin-right: 0px">
                <div style="flex: 1"></div>
                <div class="item-wrapper-n-column ml4">
                  <span class="content-span-a6a8b4">未到账金额</span>
                  <span class="content-span-a6a8b4 mt16">已结算金额</span>
                </div>
                <div class="item-wrapper-n-column ml4">
                  <span class="contentSpans">{{ amountUnpaidAmountCount }}笔</span>
                  <span class="contentSpans mt16">{{ amountPaidAmountCount }}笔</span>
                </div>
              </div>
            </a-popover>
          </details-top-item>
        </a-col>
      </a-row>
    </div>
    <div class="content-bag-fff mt24">
      <revenue-chart :siteId="siteId" />
    </div>
    <div class="content-bag-fff mt24" style="padding-bottom: 24px">
      <log-list :siteId="siteId" />
    </div>
  </div>
</template>

<script>
import detailsTopItem from "./detailsTopItem.vue";
import LogList from "./logList.vue";
import RevenueChart from "./revenueChart.vue";
import moment from "moment";
import { selectSocCount, selectHomeEmpCount, selectRevenueAmount } from "../api";
export default {
  components: { detailsTopItem, RevenueChart, LogList },
  props: ["siteId"],
  data() {
    return {
      briefingMonth: moment(),
      socTitle: "月参保人数",
      empTitle: "月在职员工数",
      amountTitle: "月营收总金额",
      socCount: 0,
      socDecreaseCount: 0,
      socIncreaseCount: 0,
      empBeforeLeavingCount: 0,
      empBeforeWorkingCount: 0,
      empCurrentLeavingCount: 0,
      empCurrentWorkingCount: 0,
      empWorkingCount: 0,
      amountPaidAmount: 0,
      amountPaidAmountCount: 0,
      amountTotalRevenueAmount: 0,
      amountUnpaidAmount: 0,
      amountUnpaidAmountCount: 0
    };
  },
  watch: {
    briefingMonth(val) {
      this.socTitle = moment(val).format("M") + "月参保人数";
      this.empTitle = moment(val).format("M") + "月在职员工数";
      this.amountTitle = moment(val).format("M") + "月营收总金额";
      this.selectSocCount(val);
      this.selectHomeEmpCount(val);
      this.selectRevenueAmount(val);
    },
    siteId(newValue) {
      this.socTitle = moment(this.briefingMonth).format("M") + "月参保人数";
      this.empTitle = moment(this.briefingMonth).format("M") + "月在职员工数";
      this.amountTitle = moment(this.briefingMonth).format("M") + "月营收总金额";
      this.selectSocCount(this.briefingMonth);
      this.selectHomeEmpCount(this.briefingMonth);
      this.selectRevenueAmount(this.briefingMonth);
    }
  },
  created() {
    this.socTitle = moment().format("M") + "月参保人数";
    this.empTitle = moment().format("M") + "月在职员工数";
    this.amountTitle = moment().format("M") + "月营收总金额";
    this.selectSocCount(moment());
    this.selectHomeEmpCount(moment());
    this.selectRevenueAmount(moment());
  },
  methods: {
    moment,
    selectSocCount(data) {
      const da = {
        month: moment(data).format("MM"),
        year: moment(data).format("YYYY")
      };
      if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
        da.companyIds = this.siteId;
      }
      selectSocCount(da)
        .then((res) => {
          this.socCount = res.data.socCount;
          this.socDecreaseCount = res.data.decreaseCount;
          this.socIncreaseCount = res.data.increaseCount;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    selectHomeEmpCount(data) {
      const da = {
        month: moment(data).format("MM"),
        year: moment(data).format("YYYY")
      };
      if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
        da.companyIds = this.siteId;
      }
      selectHomeEmpCount(da)
        .then((res) => {
          this.empBeforeLeavingCount = res.data.beforeLeavingCount ? res.data.beforeLeavingCount : 0;
          this.empBeforeWorkingCount = res.data.beforeWorkingCount ? res.data.beforeWorkingCount : 0;
          this.empCurrentLeavingCount = res.data.currentLeavingCount ? res.data.currentLeavingCount : 0;
          this.empCurrentWorkingCount = res.data.currentWorkingCount ? res.data.currentWorkingCount : 0;
          this.empWorkingCount = res.data.workingCount ? res.data.workingCount : 0;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    selectRevenueAmount(data) {
      const da = {
        monthly: moment(data).format("MM"),
        yearly: moment(data).format("YYYY")
      };
      if (this.siteId && this.siteId !== "undefined" && this.siteId !== "-1") {
        da.companyIds = this.siteId;
      }
      selectRevenueAmount(da)
        .then((res) => {
          this.amountPaidAmount = res.data.paidAmount;
          this.amountPaidAmountCount = res.data.paidAmountCount;
          this.amountTotalRevenueAmount = "¥ " + res.data.totalRevenueAmount;
          this.amountUnpaidAmount = res.data.unpaidAmount;
          this.amountUnpaidAmountCount = res.data.unpaidAmountCount;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.right-wrapper {
  margin-left: 20px;
  // margin-right: 20px;
  min-width: 980px;
  .right-lin {
    box-shadow: -1px 0px 0px 0px #e8e8e8;
  }
  .item-wrapper-n {
    display: flex;
    flex: 1;
    margin-right: 14px;
  }
  .item-wrapper-n-column {
    display: flex;
    flex-direction: column;
  }
  .item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }
  .item-content {
    display: flex;
    align-items: center;
  }
  .content-span-a6a8b4 {
    font-size: 12px;
    font-weight: 400;
    color: #a6a8b4;
    line-height: 18px;
  }
  .content-span-767885 {
    font-size: 12px;
    font-weight: 400;
    color: #767885;
    line-height: 18px;
  }
  .content-span-55565d {
    font-size: 12px;
    font-weight: 400;
    color: #55565d;
    line-height: 18px;
  }
  .content-span-FF7085 {
    font-size: 12px;
    font-weight: 400;
    color: #ff7085;
    line-height: 18px;
  }
  .content-span-32CCAA {
    font-size: 12px;
    font-weight: 400;
    color: #32ccaa;
    line-height: 18px;
  }
  .contentSpans {
    font-size: 12px;
    font-weight: 400;
    color: var(--primary);
    line-height: 18px;
  }

  .font-16px-3c3d43 {
    font-size: 16px;
    font-weight: 500;
    color: #3c3d43;
    line-height: 24px;
  }

  .content-bag-fff {
    background: #ffffff;
    border-radius: 4px;
  }

  .bag-6a66f6-radius-2px {
    background: var(--primary);
    border-radius: 2px;
  }
}
.content-span-popover {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  .popover-div {
    display: flex;
    flex-direction: column;
    .popover-top {
      display: flex;
    }
  }
  .content_span {
    margin-top: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #55565d;
    line-height: 18px;
  }
  .popoverContentSpan {
    font-size: 12px;
    font-weight: 400;
    color: #767885;
    line-height: 18px;
  }
  .popover-contentSpan {
    font-size: 12px;
    font-weight: 400;
    color: var(--primary);
    line-height: 18px;
  }
}
</style>
